<template>
  <div>
    <!-- 商品信息展示 -->
    <van-card
      v-for="item in message"
      :key="item.id"
      :price="item.sell_price"
      :desc="item.zhaiyao"
      :title="item.title"
      :thumb="item.thumb_path"
      :num="item.cou"
    >
      <div slot="footer">
        <van-stepper v-model="item.cou" />
      </div>
    </van-card>
    <!-- 按钮 -->
    <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      message: [],
      price: 0,
      num:0
    };
  },
  created() {
    this.getshoppingCar();
  },
  computed: {
    ...mapState(["carnum", "carvalue"])
  },
  methods: {
    // 获取数据
    async getshoppingCar() {
      const strid=window.localStorage.getItem('cargoodsid');
      const obj=window.localStorage.getItem('carobj')
      const arr=JSON.parse(obj);
      const { data: res } = await this.$http.get("/api/goods/getshopcarlist/" + strid);
      this.message = res.message;
      if(arr.length!==0){
        this.message.forEach(item=>{
          arr.forEach(x=>{
            if(item.id===x.id){
              item.cou=x.num;
              return true
            }
          })
      })
        return this.message
      }
    },
    // 点击提交事件
    onSubmit() {
      console.log(1);
    }
  },
  // 计算属性
  computed: {
    total() {
      let total = 0;
      for (let index = 0; index < this.message.length; index++) {
        total += this.message[index].sell_price * this.message[index].cou;
      }
      return total;
    }
  }
};
</script>

<style lang="less" scoped>
.van-card {
  font-size: 14px;
  text-align: left;
}
.van-button {
  cursor: pointer;
}
</style>
